<template>
  <div class='app-main'>
    <!-- <img id="logo" :src="logo" alt="移动云"> -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000"
               indicator-color="white">
      <van-swipe-item v-for="(url, index) in images"
                      :key="index">
        <van-image :src="url" fit="contain">
        </van-image>
      </van-swipe-item>
    </van-swipe> -->
    <div class="banner">
      <div class="text">
        <p class="blod">移动云产品</p>
        <div class="blod-sub">
          <p>移动云为客户提供云网一体、贴身服务、随心定制、安全可控的专业云服务</p>
        </div>
      </div>
    </div>
    <div class="center-contain">
      <span class="title">移动自有应用上云
      </span>
      <div class="sub-title">
        <p><span class="red_num">26</span>家移动专业公司</p>
        <span class="red_num">156</span>个业务平台自有应用已上线移动云
      </div>
      <van-image class="mobile_logo" fit='contain'
                 :src="moreLogo"
                 @click="preview(moreLogo)"></van-image>
    </div>
    <div class="advantage-contain">
      <span class="title">移动云 值得信赖
      </span>
      <div class="sub-title">
        <p>资源更丰富 数据更安全 </p>
        <p style="margin-top:5px;">价格更实惠 服务更到位</p>
        <van-image class="mobile_logo" fit='contain'
                   :src="img1"
                   @click="preview(img1)"></van-image>
      </div>
    </div>
    <div class="serve-contain">
      <span class="title">随心定制的服务模式
      </span>
      <div class="sub-title">
        <p>提供多模式、多业务、定制化的云产品
        </p>
        <van-image class="mobile_logo" fit='contain'
                   :src="img2"
                   @click="preview(img2)"></van-image>
      </div>
    </div>
    <div class="serve-contain">
      <span class="title">专业贴心的服务体验
      </span>
      <div class="sub-title">
        <p>
          移动云安全可靠，提供2~7层全方位立体式的安全防御体系，帮助客户建立从网络边界、到应用、数据备份、行为审计、态势感知、病毒防御等的安全系统
        </p>
        <van-image class="mobile_logo" fit='contain'
                   :src="img3"
                   @click="preview(img3)"></van-image>
        <van-image class="mobile_logo" fit='contain'
                   :src="img4"
                   @click="preview(img4)"></van-image>
      </div>
    </div>
    <div class="case-contain">
      <span class="title">精品案例推荐</span>
      <div class="tab-contain">
        <van-tabs v-model="active">
          <van-tab title="AI行业">
            <van-grid :gutter="20" column-num="2">
              <van-grid-item @click="toClick('BYKJ')">
                <h3>BYKJ</h3>
                <p> 大模型项目</p>
              </van-grid-item>
            </van-grid>
          </van-tab>
          <van-tab title="互联网行业">
            <van-grid :gutter="20" column-num="2">
              <van-grid-item @click="toClick('SZFQ')">
                <div class="cardBox">
                  <h3>SZFQ</h3>
                  <p>移动云系统服务</p>
                </div>
              </van-grid-item>
              <van-grid-item @click="toClick('KQKJ')">
                <div class="cardBox">
                  <h3>KQKJ</h3>
                  <p>移动云全栈式安全防护服务</p>
                </div>
              </van-grid-item>
            </van-grid></van-tab>
          <van-tab title="工业行业"> <van-grid :gutter="20"
                      column-num="2">
              <van-grid-item @click="toClick('NSD')">
                <div class="cardBox">
                  <h3>NSD </h3>
                  <p> 组建私有云+移动公有云混合云模式</p>
                </div>
              </van-grid-item>
              <van-grid-item @click="toClick('JCJM')">
                <div class="cardBox">
                  <h3>JCJM</h3>
                  <p> ERP生产系统上云</p>
                </div>
              </van-grid-item>
            </van-grid>
          </van-tab>
          <van-tab title="外企"> <van-grid :gutter="20"
                      column-num="2">
              <van-grid-item @click="toClick('FSDJ')">
                <div class="cardBox">
                  <h3>FSDJ</h3>
                  <p>ERP核心系统上云</p>
                </div>
              </van-grid-item>
            </van-grid></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="footer-contain">
      <div class="flex_top">
        <div class="flex_box">
          <div class="flex_item">
            <div class="flex-left">
              服务渠道
            </div>
            <div class="flex-right">
              <p>专属支撑、技术专席 </p>
              <p>在线工单、7*24小时热线 </p>
              <p>邮箱、智能客服</p>
            </div>
          </div>
        </div>
        <div class="flex_box">
          <div class="flex_item">
            <div class="flex-left">
              <p> 服务团队</p>
            </div>
            <div class="flex-right">
              <p>1对1 客户经理 </p>
              <p>统一运维团队400+人 </p>
              <p>客户专属运维团队</p>
            </div>
          </div>
        </div>
        <div class="flex_box">
          <div class="flex_item">
            <div class="flex-left">
              <p>金牌客户服务承诺</p>
            </div>
            <div class="flex-right">
              <p>服务响应：＜5分钟 </p>
              <p>问题解决：＜12小时 </p>
            </div>
          </div>
        </div>
        <div class="flex_box">
          <div class="flex_item">
            <div class="flex-left">
              <p>售前业务咨询</p>
            </div>
            <div class="flex-right">
              <p>产品经理 蔡武 13802882842
              </p>
              <p>方案经理 周仕东 13825660379
              </p>
              <p>方案经理 林伟加 18033449906
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  name: 'appMain',
  components: {},
  data () {
    return {
      activeKey: 0,
      active: 0,
      activeNames: ['1'],
      logo: require('../assets/images/ecloud-logo.png'),
      moreLogo: require('../assets/images/main_logo.png'),
      img1: require('../assets/images/img1.png'),
      img2: require('../assets/images/img2.png'),
      img3: require('../assets/images/img3.png'),
      img4: require('../assets/images/img4.png'),
      isMobile: false,
      isTablet: false,

    };
  },
  computed: {},
  watch: {},
  mounted () {
    const userAgent = window.navigator.userAgent;
    const screenWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    this.isMobile = /Mobile/i.test(userAgent) || screenWidth < 768;
    this.isTablet =
      /Tablet/i.test(userAgent) || (screenWidth >= 768 && screenWidth < 1024);
  },
  methods: {
    toClick (model) {
      this.$router.push('/commonIndex?model=' + model)
    },
    preview (url) {
      ImagePreview([url]);
    }
  },
}
</script>
<style lang='scss' scoped>
  .app-main {
    text-align: center;
    .center-contain,
    .advantage-contain,
    .serve-contain,
    .case-contain {
      margin-top: 1.25rem;
    }
  }
  .banner {
    width: 100vw;
    height: 30vh;
    background: url('../assets/images/banner.jpg') no-repeat;
    background-size: 100%;
    position: relative;
    .text {
      font-size: 1.75rem;
      .blod {
        font-weight: 600;
        position: absolute;
        left: 8%;
        top: 20%;
      }
      .blod-sub {
        position: absolute;
        left: 8%;
        top: 45%;
        text-align: left;
        line-height: 3rem;
      }
      // transform: translate(-50%);
    }
  }
  .title {
    font-size: 1.75rem;
    font-weight: 600;
    padding: 0.9375rem;
    border-bottom: 1px solid #0a507d;
  }
  .sub-title {
    color: #333;
    padding: 0 1.875rem;
    font-size: 1.25rem;
    letter-spacing: 0.125rem;
    line-height: 2.875rem;
    p {
      margin-bottom: 0;
    }
    .red_num {
      color: #d5a083;
      font-weight: 600;
      font-size: 2.125rem;
      margin: 0 0.3125rem;
    }
  }
  .center-contain {
    text-align: center;
    padding: 0.625rem;

    // .mobile_logo {
    //   height: 18.75rem;
    // }
  }
  .case-contain {
    text-align: center;
    .title {
      font-size: 1.75rem;
      font-weight: 600;
      display: inline-block;
    }
    .tab-contain {
      margin-bottom: 2.5rem;
      ::v-deep .van-tab__text {
        font-size: 1.25rem;
        font-weight: 600;
      }
      .van-grid-item {
        margin-top: 1.25rem;
        border-radius: 0.5rem;
        border: none;
        font-size: 1.375rem;
        letter-spacing: 1.5px;
        ::v-deep .van-grid-item__content {
          border-radius: 0.5rem;
          color: #fff;
          background-image: url('../assets/images/bg2.png');
          background-size: 100%;
        }
      }
    }
  }

  .footer-contain {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    .flex_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .flex_box {
      display: flex;
      align-items: center;
      min-width: 18.75rem;
      // justify-content: space-around;

      .flex_item {
        min-width: 18.75rem;
        display: flex;
        align-items: center;
        margin: 1.25rem;
        .flex-left {
          width: 7.5rem;
          height: 7.5rem;
          border-radius: 50%;
          text-align: center;
          // background-color: #002478;
          color: #f4b183;
          font-size: 1.125rem;
          font-weight: 600;
          // padding: 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          p {
            margin: 0;
          }
        }
        .flex-right {
          text-align: left;
          padding-left: 1.25rem;
          margin-left: 1.25rem;
          border-left: 2px dashed #f0ecec;
        }
      }
    }
  }
</style>